<template>
  <!-- 名片简介 -->
  <view class="card-introduction">
    <CardComHeader v-if="cardType" :title="typeText" des="2000字以内" />
    <view v-if="isEdit" class="edit-container">
      <UniEasyinput
        :value="modelValue"
        type="textarea"
        :clearable="false"
        :inputBorder="false"
        :maxlength="2000"
        :autoHeight="true"
        :placeholder="placeholder"
        @input="onInput"
      />
    </view>
    <view v-else class="content">
      {{ modelValue }}
    </view>
  </view>
</template>

<script setup lang="ts">
  import { ApplyTypeEnum } from '@/enums/membershipEnum';
  import { propTypes } from '@/utils/propTypes';
  import { computed, type PropType } from 'vue';
  import Dictionary from '@/utils/dictionary';
  import UniEasyinput from '@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue';
  import CardComHeader from '../cardComHeader/index.vue';

  const props = defineProps({
    modelValue: propTypes.string.def(''),
    /** 是否为编辑模式 */
    isEdit: propTypes.bool.def(false),
    /** 名片类型 */
    cardType: Number as PropType<ApplyTypeEnum>,
    placeholder: propTypes.string.def('请输入简介'),
  });

  const emit = defineEmits(['update:modelValue']);

  function onInput(val: string) {
    emit('update:modelValue', val);
  }

  const typeText = computed(() => {
    const types = Dictionary.getLocal('memberType');
    const text = types.find((v) => v.dictValue === props.cardType)?.dictLabel ?? '';
    return `${text}简介`;
  });
</script>

<style lang="scss" scoped>
  .card-introduction {
    .content {
      color: #333;
      font-size: 28rpx;
      word-wrap: break-word;
      word-break: break-all;
    }
  }
</style>
